<template>
<!-- 组合式API setup方法 -->
<div id="">
    <p>{{ num }}</p>
    <button @click="hdClick">按钮</button>
</div>
</template>

<script>
import {
    ref
} from "vue";
export default {
    //什么时候执行setup?执行于beforeCreate之前
    //setup中访问不到this
    setup() {
        //ref方法的作用就是把我们的数据变成响应式数据
        //ref只对值类型的数据起作用
        let num = ref(20); //此时的num是一个响应式的对象，而不是单纯的数字20
        console.log(num.value);//这样写才能获取数据20
        let hdClick = () => {
            num.value++;
        };
        return {
            num,
            hdClick,
        };
    },
};
</script>

<style lang="less" scoped>
</style>
